import React from 'react'
import { Observer } from 'mobx-react-lite'
import { Form, Row, Col, Input, Select, DatePicker, Button, message } from 'antd'
import { Rule } from 'rc-field-form/lib/interface';

export interface baseOptions {
  value: number | string;
  nameValue: string;
}

export interface baseInputInfo {
  name: string;
  label: string;
  rules: Rule[];
  placeholder: string;
  addonBefore?: string;
  addonAfter?: string;
  style?: object;
  option?: baseOptions[];
  rows?: number;
}

export interface baseInputListType {
  inputType: 'input' | 'select' | 'radio' | "textArea" | "DatePicker";
  inputItemInfo: baseInputInfo;
}

export interface baseFormItem {
  [key: string]: string;
}

/**
 * @param {inputList} form 表单项目循环列表
 * @param {initItem} form 表单初始化表单
 * @param {layout} form 表单排列方式 "horizontal" | "vertical" | "inline"
 */
export interface baseSearchBoxType {
  inputList: baseInputListType[];
  initItem: baseFormItem;
  labelCol?: object | undefined;
  wrapperCol?: object | undefined;
  layout: "horizontal" | "vertical" | "inline";
}

const { Option } = Select;
const SearchBox: React.FC<baseSearchBoxType> = ({
  inputList,
  initItem,
  layout,
  wrapperCol,
  labelCol
}) => {
  const [form] = Form.useForm();

  const search = () => {
    form.validateFields()
      .then((values) => {
        console.log(values, '====查询  values====')
      })
      .catch((errorInfo) => {
        /** 错误信息 */
        console.log(errorInfo);
        message.error(errorInfo)
      });
  }

  const reset = () => form.resetFields()

  const inputMapView = () => {
    return inputList.length > 0 && inputList.map((k, i) => {
      if (k.inputType === 'input') {
        return (
          <Col span={12} key={i}>
            <Form.Item
              name={k.inputItemInfo.name}
              label={k.inputItemInfo.label}
              rules={k.inputItemInfo.rules}
            >
              <Input placeholder={k.inputItemInfo.placeholder} />
            </Form.Item>
          </Col>
        );
      }
      else if (k.inputType === "select") {
        return (
          <Col span={12} key={i}>
            <Form.Item
              name={k.inputItemInfo.name}
              label={k.inputItemInfo.label}
              rules={k.inputItemInfo.rules}
              key={i}
            >
              <Select placeholder={k.inputItemInfo.placeholder}>
                {k.inputItemInfo.option && k.inputItemInfo.option.map((item) => {
                  return (
                    <Option value={item.value} key={item.value}>
                      {item.nameValue}
                    </Option>
                  )
                })}
              </Select>
            </Form.Item>
          </Col>
        );
      }
      else if (k.inputType === 'DatePicker') {
        return (
          <Col span={12} key={i}>
            <Form.Item
              name={k.inputItemInfo.name}
              label={k.inputItemInfo.label}
              rules={k.inputItemInfo.rules}
            >
              <DatePicker style={{ width: '100%' }} />
            </Form.Item>
          </Col>
        )
      }
      else if (k.inputType === 'textArea') {
        <Col span={24} key={i}>
          <Form.Item
            name={k.inputItemInfo.name}
            label={k.inputItemInfo.label}
            rules={k.inputItemInfo.rules}
          >
            <Input.TextArea rows={4} placeholder={k.inputItemInfo.placeholder} />
          </Form.Item>
        </Col>
      }
    })
  }

  return (
    <Observer>
      {() => (
        <Form
          layout={layout}
          initialValues={initItem}
          autoComplete="off"
          form={form}
          labelCol={labelCol}
          wrapperCol={wrapperCol}
        >
          <Row gutter={16}>
            {inputMapView()}
          </Row>
          <Row style={{ marginBottom: "10px" }}>
            <Col span={4} offset={10}>
              <Button type='primary' style={{ width: '80px', marginRight: '20px' }} onClick={search}>查询</Button>
              <Button type='default' style={{ width: '80px' }} onClick={reset}>重置</Button>
            </Col>
          </Row>
        </Form>
      )}
    </Observer>
  )
}

export default SearchBox